<template>
  <el-tree-select v-model="value" :data="getAppOptions()" node-key="id" multiple show-checkbox default-expand-all check-strictly>
    <template #default="{ node, data }">
      <div class="flex items-center gap2px">
        <Icon :icon="data.icon" :color="data.color" />
        <span :style="{color: data.color}">{{ node.label }}</span>
      </div>
    </template>
  </el-tree-select>
</template>
<script setup lang="ts">
  import { ElTreeSelect } from 'element-plus';
  import { Icon } from '@/components/Icon';
  import { ref, watch } from 'vue';
  import { getAppOptions } from '..';

  const props = defineProps<{modelValue?: string[]}>()
  const emits = defineEmits(['update:modelValue'])

  const value = ref<string[]>(props.modelValue)

  watch(value, () => emits('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)
</script>